<template>
	<!-- 回收员中心 -->
	<view class="recyclerCenter">
		<view class="recyclerCenter-header">
			<view class="avatarImg">
				<image :src="userinfo.name?avatar:defaultAvatar" mode=""></image>
				<!-- <image :src="userinfo.avatar" mode=""></image> -->
			</view>
			<view class="nicknameinfo">
				<view class="nickName">{{userinfo.name?userinfo.name:'回收员名称'}}</view>
				<view class="refreshLocation" @tap="refreshLocation"><text
						class="icon iconfont icon-shuaxin"></text>刷新位置</view>
			</view>
			<view class="header-right">
				<view>
					<switch color="#00b388" :checked="isSwitchOn" @change="handleSwitchChange"></switch>
				</view>
				<view>开启接单</view>
			</view>
		</view>
		<view class="myOrder">
			<view class="myOrder-title">我的订单</view>
		</view>
		<view class="oederInfo">
			<view class="orderInfo-list" @tap="inTakOrder(1)">
				<view class="icon iconfont icon-daichuli"></view>
				<view>待回收</view>
			</view>
			<view class="orderInfo-list" @tap="inTakOrder(2)">
				<view class="icon iconfont icon-a-ReusableList"></view>
				<view>已回收</view>
			</view>
			<view class="orderInfo-list" @tap="inTakOrder(3)">
				<view class="icon iconfont icon-recycle"></view>
				<view>待打包</view>
			</view>
			<view class="orderInfo-list" @tap="inTakOrder(4)">
				<view class="icon iconfont icon-yichuli"></view>
				<view>已完成</view>
			</view>
		</view>
		<!-- <view class="incomeData">
			<view class="incomeData-title">
				<text class="title-text">收入数据 </text>
				<text class="unit">(单位：回收币)</text>
			</view>
			<view class="incomeData-content">
				<view class="content">
					<view class="coins initial-coins">XX</view>
					<view class="content-text initial-text">初始<text class="icon iconfont icon-tishi"></text></view>
					<view class="button recharge">充值</view>
				</view>
				<view class="content">
					<view class="coins withdrawal-coins">XX</view>
					<view class="content-text withdrawal-text">可提现</view>
					<view class="button withdrawal">提现</view>
				</view>
				<view class="content">
					<view class="coins">XX</view>
					<view class="content-text">累计提现</view>
					<view class="button record">提现记录</view>
				</view>
			</view>
		</view> -->
		<view class="operation">
			<view class="operation-list" @tap="orderGrab">
				<view class="listImg">
					<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/order-hall@3x.png"
						mode=""></image>
				</view>
				<view class="list-text">抢单大厅</view>
				<view class="icon iconfont icon-xiangyoujiantou"></view>
			</view>
			<view class="operation-list" @tap="queryOrder">
				<view class="listImg">
					<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/recycle-order@3x.png"
						mode=""></image>
				</view>
				<view class="list-text">订单查询</view>
				<view class="icon iconfont icon-xiangyoujiantou"></view>
			</view>
			<view class="operation-list" @tap="priceTable">
				<view class="listImg">
					<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/price.png" mode="">
					</image>
				</view>
				<view class="list-text">回收员价格表</view>
				<view class="icon iconfont icon-xiangyoujiantou"></view>
			</view>
			<view class="operation-list wangdian" @tap="outlets">
				<view class="listImg">
					<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/recycleOutlets.png"
						mode=""></image>
				</view>
				<view class="list-text">回收网点</view>
				<view class="icon iconfont icon-xiangyoujiantou"></view>
			</view>
		</view>
		<!-- 收支汇总 -->
		<view class="expend">
			<view class="expendTitle">
				<text class="zhichu">收支汇总</text>
				<text class="danwei">(单位：回收币)</text>
			</view>
			<view class="sumList" @tap="inSumexpenses(1)">
				<view class="list-img">
					<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/week.png"
						mode="aspectFill"></image>
				</view>
				<view class="list-content">
					<view class="content">
						<view class="content-text expend-list">
							<text class="num">支出笔数：{{userinfo.weekTotal}}</text>
							<text class="content-coins">支出：{{userinfo.weekOutPrice}}</text>
						</view>
						<view class="content-text">
							<text class="num">收入笔数：{{userinfo.weekTotal}}</text>
							<text class="content-coins">收入：{{userinfo.weekInPrice}}</text>
						</view>
					</view>
				</view>
				<view class="icon iconfont icon-xiangyoujiantou"></view>
			</view>
			<view class="sumList" @tap="inSumexpenses(2)">
				<view class="list-img">
					<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/month.png"
						mode="aspectFill"></image>
				</view>
				<view class="list-content">
					<view class="content">
						<view class="content-text expend-list">
							<text class="num">支出笔数：{{userinfo.monthTotal}}</text>
							<text class="content-coins">支出：{{userinfo.monthOutPrice}}</text>
						</view>
						<view class="content-text">
							<text class="num">收入笔数：{{userinfo.monthTotal}}</text>
							<text class="content-coins">收入：{{userinfo.monthInPrice}}</text>
						</view>
					</view>
				</view>
				<view class="icon iconfont icon-xiangyoujiantou"></view>
			</view>
			<view class="sumList" @tap="inSumexpenses(3)">
				<view class="list-img">
					<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/season.png"
						mode="aspectFill"></image>
				</view>
				<view class="list-content">
					<view class="content">
						<view class="content-text expend-list expend-list">
							<text class="num">支出笔数：{{userinfo.quarterTotal}}</text>
							<text class="content-coins">支出：{{userinfo.quarterOutPrice}}</text>
						</view>
						<view class="content-text">
							<text class="num">收入笔数：{{userinfo.quarterTotal}}</text>
							<text class="content-coins">收入：{{userinfo.quarterInPrice}}</text>
						</view>
					</view>
				</view>
				<view class="icon iconfont icon-xiangyoujiantou"></view>
			</view>
			<view class="sumList sumListEnd" @tap="inSumexpenses(4)">
				<view class="list-img">
					<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/year.png"
						mode="aspectFill"></image>
				</view>
				<view class="list-content">
					<view class="content">
						<view class="content-text">
							<text class="num">支出笔数：{{userinfo.yearTotal}}</text>
							<text class="content-coins">支出：{{userinfo.yearOutPrice}}</text>
						</view>
						<view class="content-text">
							<text class="num">收入笔数：{{userinfo.yearTotal}}</text>
							<text class="content-coins">收入：{{userinfo.yearInPrice}}</text>
						</view>
					</view>
				</view>
				<view class="icon iconfont icon-xiangyoujiantou"></view>
			</view>
		</view>
		<reviewPopup v-if="isPopup" :isPopup="isPopup" popValueIndex="-2" @changeData="hidePopup"></reviewPopup>
	</view>
</template>

<script>
	import util from '../../component/commen/api/util';
	import reviewPopup from "@/component/popupReview.vue"
	export default {
		components: {
			reviewPopup
		},
		data() {
			return {
				userinfo: {}, //回收员信息
				defaultAvatar: "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0", //默认头像
				isSwitchOn: false, //是否开启接单
				isPopup: false, //是否显示弹框
				avatar: "", //头像
			};
		},
		onShow() {
			this.getinfo()
		},
		methods: {
			getinfo() { //获取相应数据信息
				this.isSwitchOn = uni.getStorageSync("isSwitchOn")
				if (!this.isSwitchOn) {
					var params = {
						do: "collector",
						op: "set"
					}
				} else {
					var params = {
						do: "collector",
						collectorid: uni.getStorageSync("collectorid")
					}
				}

				util.requestWithSign(params).then(res => {
					console.log("请求数据：", res)
					this.userinfo = res.data
					// 是否开启接单
					this.isSwitchOn = res.data.is_online == 1 ? true : false
					this.getuserImg()
				})
			},
			handleSwitchChange(value) { //点击开关
				console.log("点击时用户信息：", this.userinfo)
				this.isSwitchOn = value.detail.value
				uni.setStorageSync("isSwitchOn", this.isSwitchOn)
				console.log("开关状态：", this.isSwitchOn)
				var isonline = this.isSwitchOn ? 1 : 2
				var params = {
					do: "collector",
					op: "online",
					collectorid: uni.getStorageSync("collectorid"),
					is_online: isonline, //1:开启;2:关闭
				}
				util.requestWithSign(params).then(res => {
					console.log("操作结果：", res)
					if (res.errno == 0) {
						var data = {
							do: "collector",
							collectorid: uni.getStorageSync("collectorid")
						}
						util.requestWithSign(data).then(event => {
							console.log("请求结果：", event)
							this.userinfo = event.data
							this.getuserImg()
						})
					}
				})

			},
			getuserImg() { //获取带有头像的用户信息
				var obj = {
					do: "user",
					uid: this.userinfo.uid
				}
				util.requestWithSign(obj).then(event => {
					this.avatar = event.data.avatar
					console.log("包含头像的用户数据", this.userinfo)
				})
			},
			inSumexpenses(value) { //点击收支汇总
				uni.navigateTo({
					url: `/otherPages/sumexpenses/sumexpenses?type=${value}&text="收入"`
				})
			},
			inTakOrder(id) { //点击进入我的订单
				uni.navigateTo({
					url: `/otherPages/myTakOrder/myTakOrder?openId=${id}`
				})
			},
			refreshLocation() { //点击刷新位置
				uni.getLocation({
					type: "wgs84",
					success: (res) => {
						console.log("刷新返回结果：", res)
						// 拿到新的位置，请求接口
						var params = {
							do: "collector",
							op: "refresh",
							collectorid: uni.getStorageSync("collectorid"),
							lng: res.longitude,
							lat: res.latitude
						}
						util.requestWithSign(params).then(res => {
							console.log("刷新数据：", res)
							// this.userinfo = res.data
							this.getinfo()
							// this.getuserImg()
						})
					},
					fail: (err) => {
						uni.showModal({
							title: '提示',
							content: '请开启定位权限以获取位置信息',
							showCancel: true,
							success(res) {
								if (res.confirm) {
									// 用户点击确定，跳转至设置页面
									uni.openSetting({
										success(res) {
											console.log('openSetting success', res
												.authSetting);
											// 用户授权成功后再次尝试获取位置信息
											if (res.authSetting[
													'scope.userLocation']) {
												this.refreshLocation();
											}
										}
									});
								}
							}
						});
					}

				})
			},
			orderGrab() { //点击抢单大厅
				if (!this.isSwitchOn) {
					return uni.showToast({
						title: "请先开启接单！",
						icon: "none"
					})
				}
				console.log("点击抢单大厅")
				uni.navigateTo({
					url: "/otherPages/grabOrder/grabOrder"
				})
			},
			queryOrder() { //点击订单查询
				console.log("点击订单查询")
				this.isPopup = true
			},
			hidePopup(e) {
				this.isPopup = e
			},
			priceTable() { //点击回收员价格表
				console.log(this.userinfo)
				uni.navigateTo({
					url: `/otherPages/priceTable/priceTable?county=${this.userinfo.county}`
				})
			},
			outlets() { //点击回收网点
				uni.navigateTo({
					url: "/otherPages/outlets/outlets"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.recyclerCenter {
		padding-bottom: 30rpx;
		// border: 1px solid #000;
		font-size: 27rpx;

		.recyclerCenter-header {
			display: flex;
			background: #fff;
			padding: 20rpx;
			// border: 1px solid #f00;
			box-sizing: border-box;

			.avatarImg {
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.nicknameinfo {
				.nickName {}

				.refreshLocation {
					font-size: 25rpx;
					color: #fff;
					background: #00b388;
					border-radius: 10rpx;
					padding: 10rpx 20rpx;
					// box-sizing: border-box;
					margin-top: 10rpx;
					text-align: center;

					.icon-shuaxin {
						font-size: 28rpx;
						margin-right: 10rpx;
						display: inline-block;
					}
				}
			}

			.header-right {
				margin-left: auto;

				switch {
					// --bg-on: #2196F3; /* 设置打开时的背景颜色为蓝色 */
					transform: scale(0.7);
				}
			}
		}

		.myOrder {
			margin-top: 20rpx;

			.myOrder-title {
				font-weight: bold;
				background: #fff;
				padding: 20rpx;
				box-sizing: border-box;
				border-bottom: 2rpx solid #eee;
			}
		}

		.oederInfo {
			padding: 40rpx 0;
			box-sizing: border-box;
			background: #fff;
			display: flex;

			.orderInfo-list {
				width: 25%;
				font-size: 25rpx;
				text-align: center;
				color: #919191;

				.icon {
					font-size: 60rpx;
					margin-bottom: 10rpx;
				}
			}
		}

		.incomeData {
			background: #fff;
			padding: 40rpx 20rpx;
			margin-top: 20rpx;
			box-sizing: border-box;

			.incomeData-title {
				padding-left: 8rpx;
				border-left: #00b388 8rpx solid;

				.title-text {
					margin-right: 10rpx;
					font-weight: bold;
				}

				.unit {
					color: #adadad;
				}
			}
		}

		.incomeData-content {
			display: flex;
			align-items: center;
			text-align: center;

			.content {
				margin-top: 30rpx;
				flex: 1;

				.coins {
					font-size: 33rpx;
					font-weight: bold;
				}

				.initial-coins {
					//初始
					color: #8a8a8a;
				}

				.withdrawal-coins {
					//可提现
					color: #00b388;
				}

				.initial-text {}

				.content-text {
					color: #8a8a8a;
					margin-top: 15rpx;

					.icon {
						font-size: 28rpx;
						color: #adadad;
						margin-left: 10rpx;
						display: inline-block;
					}
				}

				.withdrawal {
					background: #00b388;
					color: #fff;
				}

				.recharge {
					border: 2rpx solid #00b388;
				}

				.record {
					background: #f1f1f1;
					color: #878787;
				}

				.button {
					margin: 0 auto;
					margin-top: 15rpx;
					width: 130rpx;
					padding: 6rpx 0;
					box-sizing: border-box;
					text-align: center;
					border-radius: 30rpx;
				}
			}
		}

		.operation {
			background: #fff;
			margin-top: 20rpx;

			.operation-list {
				display: flex;
				align-items: center;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				border-bottom: 2rpx solid #eee;

				.listImg {
					margin-right: 20rpx;
					width: 70rpx;
					height: 70rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.list-text {}

				.icon {
					margin-left: auto;
				}
			}

			.wangdian {
				border: 0;
			}
		}

		.expend {
			padding: 20rpx 0;
			background: #fff;
			margin-top: 20rpx;
			border-radius: 30rpx;

			.expendTitle {
				margin-left: 20rpx;
				padding-left: 10rpx;
				border-left: 8rpx solid #00b388;
				font-size: 27rpx;

				.zhichu {
					font-weight: bold;
				}

				.danwei {
					display: inline-block;
					margin-left: 10rpx;
					color: #8c8c8c;
				}
			}

			.sumList {
				margin-top: 20rpx;
				display: flex;
				padding: 20rpx;
				align-items: center;
				box-sizing: border-box;
				border-bottom: 2rpx solid #eee;

				.list-img {
					width: 80rpx;
					height: 80rpx;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 30rpx;
					}
				}

				.list-content {
					.list-title {
						font-size: 29rpx;
					}

					.content {
						.expend-list {
							color: #8c8c8c;
							margin-bottom: 10rpx;
						}

						font-size: 24rpx;
						margin-top: 10rpx;

						.num {

							margin-right: 40rpx;
						}
					}
				}

				.icon-xiangyoujiantou {
					margin-left: auto;
				}
			}

			.sumListEnd {
				border: 0;
			}
		}
	}
</style>